import React from "react";
import { connect } from "react-redux";
import { loadGetTourRecommendDataAsync } from "@/components/main/index/actionCreator";
import Swiper from "@/components/common/swiper.jsx";
import { TourRec } from "@/components/main/index/styled";
class TourRecommend extends React.Component {
  render() {
    var data = this.props.tourRecommend.toJS().tour_show_list;
    var swiperList = [];
    for (var n in data) {
      swiperList.push(data[n]);
    };
    if (this.props.tourRecommend.size !== 0) {
      return (
        <TourRec>
        <div>
          <h2>巡回演出</h2>
          <a href="https://m.juooo.com/Tour/moreTourShowList">&gt;</a>
          <Swiper id={"tourrec"} config={{
            slidesPerView: 1.4,
            spaceBetween: 30,
          }}>
            {
              swiperList.map((item, index) => (
                <div className="swiper-slide" key={index}>
                  <div className="data-v-8c510d6a">
                    <img src={item.pic}  alt={item.show_name} />
                    <p className="text-double">{item.show_name}</p>
                    <p> {item.schedular_num}场巡演</p>
                  </div>
                </div>
              ))
            }
          </Swiper>
        </div>
        </TourRec>
      );
    } else {
      return null;
    }

  }
  componentDidMount() {
    this.props.loadGetTourRecommendDataAsync.bind(this)();
  }
}
const mapStateToProps = state => {
  return {
    currentCity: state.getIn(["indexReducer", "currentCity"]),
    tourRecommend: state.getIn(["indexReducer", "tourRecommend"])
  };
};
const mapDispatchToProps = dispatch => {
  return {
    loadGetTourRecommendDataAsync() {
      loadGetTourRecommendDataAsync(dispatch, {
        city_id: this.props.currentCity.get("city_id")
      });
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(TourRecommend);

